<template>
  <div class="imgbox" :style="imgboxStyle">
    <img id="back" src="@/assets/img/home/content/back.svg" />
    <slot name="img"></slot>
  </div>
</template>

<script>
export default {
  name: "imgbox",
  props: {
    width: {
      type: Number,
      default: 100,
    },
    height: {
      type: Number,
      default: 500,
    },
    left: {
      type: Number,
      default: -10,
    },
    position: {
      type: String,
      default: "relative",
    },
    zindex: {
      type: Number,
      default: 2,
    },
  },
  computed: {
    imgboxStyle() {
      return {
        height: this.height + "px",
        width: this.width + "px",
        left: this.left + "%",
        position: `${this.position}`,
        zindex: `${this.zindex}`,
      };
    },
  },
};
</script>

<style scoped>
.imgbox {
  flex: 1;
  margin-right: 20px;
  cursor: pointer;
  background-size: 200% 200%;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 2px rgba(0, 0, 0, 0.03),
    0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 8px rgba(0, 0, 0, 0.05),
    0 15px 15px rgba(0, 0, 0, 0.06), 0 30px 30px rgba(0, 0, 0, 0.07),
    0 70px 65px rgba(0, 0, 0, 0.09) !important;
  background-image: url('../../../assets/img/home/content/back.svg');
}
.imgbox img {
  border-radius: 10px;
  position: absolute;
  height: 100%;
  width: 100%;
}
#back {
  width: 250%;
  height: 130%;
  top: -10%;
  left: 0%;
  border: none;
  cursor: default;
}
</style>